<script lang="ts">
import { defineComponent } from 'vue';

import { ElTabPane, ElTabs } from 'element-plus';

import BaseSetting from './components/base-setting.vue';
import SecureSetting from './components/secure-setting.vue';

export default defineComponent({
  components: {
    BaseSetting,
    SecureSetting,
    ElTabPane,
    ElTabs,
  },
  setup() {
    const settingList = [
      {
        component: 'BaseSetting',
        key: '1',
        name: '基本设置',
      },
      {
        component: 'SecureSetting',
        key: '2',
        name: '安全设置',
      },
    ];

    return {
      settingList,
    };
  },
});
</script>

<template>
  <ElTabs class="bg-background rounded-[var(--radius)] px-[16px] lg:flex-1">
    <template v-for="item in settingList" :key="item.key">
      <ElTabPane :label="item.name">
        <component :is="item.component" v-bind="$attrs" />
      </ElTabPane>
    </template>
  </ElTabs>
</template>
